<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="account">{{l('username')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="account" id="account" [(ngModel)]="user.account">
        <nz-form-explain *ngIf="validateForm.get('account').hasError('required')">{{l("please_enter_account")}}
        </nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('account').hasError('maxlength')">{{l('please_enter_max_length')}}255
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex *ngIf="!user.id">
      <nz-form-label nzRequired nzFor="password">{{l('user_password')}}</nz-form-label>
      <nz-form-control>
        <nz-input-group [nzAddOnAfter]="addOnAfterTemplate">
          <ng-template #addOnAfterTemplate>
            <i (click)="passwordStatus = !passwordStatus"
              [class]="passwordStatus ? 'ag_visibility' : 'ag_visibility_off'"></i>
          </ng-template>
          <input nz-input formControlName="password" [type]="passwordStatus ? 'password' : 'text'" id="password"
            [(ngModel)]="user.password">
        </nz-input-group>

        <nz-form-explain *ngIf="validateForm.get('password').hasError('required')">{{l('please_enter_user_password')}}
        </nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('name').hasError('maxlength')">{{l('please_enter_max_length')}}255
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="name">{{l("email")}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="name" id="name" [(ngModel)]="user.name">
        <nz-form-explain *ngIf="validateForm.get('name').hasError('required')">{{l("please_enter_email")}}
        </nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('name').hasError('maxlength')">{{l('please_enter_max_length')}}255
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="phone">{{l('phone_number')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="phone" id="phone" [(ngModel)]="user.phone">
        <nz-form-explain *ngIf="validateForm.get('phone').hasError('required')">{{l("please_enter_phone_number")}}
        </nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('phone').hasError('maxlength')">{{l('please_enter_max_length')}}255
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="roleId">{{l('user_role')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="roleId" [(ngModel)]="roleId" [nzPlaceHolder]="l('please_select_role')">
          <nz-option [nzValue]="''" [nzLabel]="l('all')"></nz-option>
          <nz-option *ngFor="let option of roles" [nzValue]="option.id" [nzLabel]="option.name"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('roleId').errors">{{l("please_select_role")}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzFor="siteId">{{l('site_alone')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="siteId" [(ngModel)]="user.siteId" [nzPlaceHolder]="l('please_select_site')">
          <nz-option [nzValue]="''" [nzLabel]="l('please_select_site')"></nz-option>
          <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
        </nz-select>
      </nz-form-control>
      <!-- <div nz-col [nzSm]="2" [nzXs]="24" class="cell-declare">
        <i class="anticon anticon-question-circle" nz-popover [nzTitle]="l('site_description')" [nzContent]="l('no_required')"></i>
      </div> -->
    </nz-form-item>
  </form>
</nz-modal>